<template>
	<div class="container py-10 px-16">
		<div class="mb-4 py-4 p-4 bg-light-200">
			<a-form
				ref="formRef"
				name="advanced_search"
				class="ant-advanced-search-form"
				:model="formState"
				@finish="onSearch"
			>
				<a-row :gutter="24">
					<a-col :span="8">
						<a-form-item
							name="arrivalTime"
							label="Excepted Arrival Time"
							:rules="[{ required: true }]"
						>
							<a-date-picker
								v-model:value="formState.arrivalTime"
								placeholder="placeholder"
							></a-date-picker>
						</a-form-item>
					</a-col>

					<a-col :span="8">
						<a-form-item name="status" label="Status" :rules="[{ required: true }]">
							<status-select v-model:value="formState.status"></status-select>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="24" style="text-align: right">
						<a-button type="primary" html-type="submit">Search</a-button>
						<a-button type="primary" class="ml-2" @click="onAdd" v-if="hasAuthorith(Role.Guest)">
							<template #icon>
								<PlusOutlined />
							</template>
							Add
						</a-button>
						<a-button class="ml-2" @click="onSearch">
							<template #icon>
								<ReloadOutlined />
							</template>
							Refresh
						</a-button>
					</a-col>
				</a-row>
			</a-form>
		</div>
		<ReservationList
			:datasource="data"
			:loading="loading"
			@update="onUpdate"
			@remove="onRemove"
			@detail="onDetail"
		></ReservationList>
	</div>
</template>

<script setup lang="ts">
import { query, remove, update } from '@/apis/graphql';
import { dateFormat } from '@/types/meta';
import {
	Reservation,
	ReservationStatus,
	SearchReservation,
	UpdateReservationForm,
} from '@/types/reservation';
import { Role } from '@/types/role';
import useAutority from '@/utils/hooks/auth';
import { useMutation, useQuery } from '@vue/apollo-composable';
import { FormInstance, message } from 'ant-design-vue';
import * as dayjs from 'dayjs';
import { compact } from 'lodash-es';
// State Define
const formState = reactive<SearchReservation>({
	arrivalTime: dayjs(),
	status: ReservationStatus.Created,
});
const formRef = ref<FormInstance>();
const router = useRouter();
const { result, loading, refetch } = useQuery(query, {
	status: formState.status,
	arrivalTime: dayjs(formState.arrivalTime).format(dateFormat),
});

const { hasAuthorith } = useAutority();
const { mutate: updateReservation } = useMutation(update);

const { mutate: cancelReservation } = useMutation(remove);

const formatData = (data: Reservation[] | undefined) =>
	compact(data).map((reservation) => ({
		...reservation,
		arrivalTime: dayjs(reservation.arrivalTime),
	}));
const data = computed(() => formatData(result.value?.browse));

const onSearch = () => {
	refetch({
		status: formState.status,
		arrivalTime: dayjs(formState.arrivalTime).format(dateFormat),
	});
};
const onAdd = () => {
	router.push({ path: '/app/graphql/create' });
};
const onUpdate = (reservation: UpdateReservationForm, id: string) => {
	updateReservation({
		input: {
			status: reservation.status,
			guestName: reservation.guestName,
			contactInfo: reservation.contactInfo,
			reservedSize: reservation.reservedSize,
			arrivalTime: dayjs(reservation.arrivalTime).format(dateFormat),
		},
		id: id,
	}).then((res) => {
		console.log(res?.data);
		message.success('Update Successfully');
		refetch();
	});
};

const onRemove = (id: string) => {
	cancelReservation({ id }).then((res) => {
		console.log(res?.data);
		message.success('Cancel Successfully');
		refetch();
	});
};

const onDetail = (id: string) => {
	router.push({
		name: 'graphql-detail',
		params: {
			id,
		},
	});
};
</script>

<style scoped></style>
